<template>
    <h2>computed</h2>
    <p>接受一个 getter 函数，返回一个只读的响应式 ref 对象。该 ref 通过 .value 暴露 getter 函数的返回值。它也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。</p>

    <p>count:{{ count }}</p>
    <p>plusOne++(错误)</p>
    <p>无法分配到 "plusOne" ，因为它是常数。ts-plugin(2588)</p>

    <p>count1:{{ count1 }}</p>
    <button @click="plusOne1add">plusOne1add</button>

</template>

<script setup>
import { computed, ref } from 'vue';

const count = ref(1)
const plusOne = computed(() => { count.value + 1 })


const count1 = ref(0)
const plusOne1 = computed({
    get: () => count.value + 1,
    set: (val) => {
        count.value = val - 1
    }
})

plusOne.value = 1
console.log(count.value) // 0

let a = 1
const plusOne1add = () => {
    plusOne1.value = a
    a++
    console.log(count.value)
}
</script>

<style></style>